<template>
	<view class="content">
		<view class="head">
			<view class="head-left">头像</view>
			<view class="flex" style="align-items: center;">
				<view class="" @click="choiceImg">
					<image :src="userInfo.images ?  userInfo.images : '/static/image/user.png'" mode="aspectFill">
					</image>
				</view>
				<image class="right-img" src="/static/image/right.png" mode=""></image>
			</view>
		</view>
		<view class="name">
			<view class="head-left">昵称</view>
			<view class="flex" style="align-items: center;">
				<input type="text" v-model="userInfo.user_nickname" maxlength="8" placeholder="请输入昵称" class="nickname text-right" />
				<image class="right-img" src="/static/image/right.png" mode=""></image>
			</view>
		</view>
		<view class="name">
			<view class="head-left">性别</view>
			<view class="flex" style="align-items: center;">
				<picker mode="selector" :range="genders" @change="onGenderChange">
					{{genders[(Number(userInfo.gender)-1)]}}
				</picker>
				<image class="right-img" src="/static/image/right.png" mode=""></image>
			</view>
		</view>
		<view class="name">
			<view class="head-left">生日</view>
			<view class="flex" style="align-items: center;">
				<view class="nickname text-right">{{userInfo.birthday}}</view>
				<image @click="toggleTab" class="right-img" src="/static/image/right.png" mode=""></image>
			</view>
		</view>
		<view class="name">
			<view class="head-left">团伴ID</view>
			<view class="flex" style="align-items: center;">
				<view class="nickname text-right">{{userInfo.id}}</view>
				<image @click="$helper.to('/pages/views/changeId/changeId')" class="right-img" src="/static/image/right.png"
					mode=""></image>
			</view>
		</view>
		<view class="name">
			<view class="head-left">手机号</view>
			<view class="flex" style="align-items: center;">
				<view class="nickname text-right"> {{mobile}}</view>
				<image class="right-img" @click="$helper.to('/pages/views/changePhone/changePhone?phone='+userInfo.mobile)"
					src="/static/image/right.png" mode=""></image>
			</view>
		</view>
		<view class="name">
			<view class="head-left">年纪</view>
			<input type="number" v-model="userInfo.age" placeholder="年纪" maxlength="11" class="nickname text-right" />
		</view>
		<view class="name">
			<view class="head-left">地区</view>
			<view class="flex" style="align-items: center;">
				<input type="number" v-model="userInfo.town" placeholder="地区" maxlength="11" class="nickname text-right" />
				<image class="right-img" src="/static/image/right.png" mode=""></image>
			</view>
		</view>
		<w-picker :visible.sync="visible" mode="date" startYear="1970" endYear="2029" :current="true"
		  fields="day" @confirm="onConfirm" @cancel="onCancel" :disabled-after="true" ref="date"></w-picker>
		<view class="btn" @tap="changeMineInfo">
			保存信息
		</view>
	</view>
</template>

<script>
	// 生日选择
	import wPicker from '@/components/uniapp-components/w-picker/w-picker.vue';
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				isAddShow: true, //判断修改头像
				imgLists: [], //上传的图片路径
				addImgLists: [], //修改后的头像
				userInfo: {}, //获取会员信息
				iconSize: 15,
				boy: true,
				girl: false,
				genders: ['男', '女'],
				genderIndex: 0,
				mobile:'',
				visible:false
			};
		},
		onLoad() {
			this.getUserInfos();
		},
		methods: {
			// 打开生日选择弹窗
			toggleTab() {
				this.visible = true;
			},
			onConfirm(res){
			  this.userInfo.birthday = res.value;
			},
			// 选择性别
			onGenderChange(e) {
				this.userInfo.gender = e.detail.value +1;
				console.log(this.userInfo.gender,'this.userInfo.gender')
			},
			//获取用户信息
			getUserInfos() {
				this.$http.getUserInfo().then(res => {
					if (res.code == '1') {
						this.userInfo = res.data;
						this.mobile = res.data.mobile.replace(res.data.mobile.substring(3, 7), '****')
						console.log(this.mobile)
					}

					if (res.code == '-201') {
						this.$helper.to('/pages/views/login/login')
					}
				})
			},
		//点击保存
		changeMineInfo() {
			console.log(this.userInfo,'this.userInfo')
			const nameTest = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
			if (!nameTest.test(this.userInfo.user_nickname) || this.userInfo
				.user_nickname.length > 8) {
				uni.showToast({
					icon: 'none',
					title: '请输入1到8位的汉字，字母，数字，下划线用户昵称',
					duration: 2000
				});
				return false;
			}
			this.$http.editUserInfo(this.userInfo).then(res => {
				if (res.code === 1) {
				 this.$helper.toast('none', '修改信息成功!');
				} else {
					this.$helper.toast('none', res.msg);
				}
			});
		},
		// 选择图片操作
		choiceImg() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], //从相册选择
				success: ress => {
					this.uploadUserImg(ress.tempFilePaths[0]);
				}
			});
		},
		uploadUserImg(blob) {
			let that = this;
			uni.showLoading({
				title: '上传中...'
			});
			uni.uploadFile({
				url: this.$http.baseUrl + '64803624da6de',
				filePath: blob,
				name: 'file',
				success: res => {
					uni.hideLoading();
					that.userInfo.avatar = JSON.parse(res.data).data.url;
					uni.showToast({
						icon:'none',
						title: '更新用户头像成功',
						duration: 1000
					});
				},
				fail: err => {
					uni.hideLoading();
					uni.showToast({
						title: '用户头像上传失败',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		// uploadUserImg(blob) {
		// 	uni.showLoading({
		// 		title: '上传中...'
		// 	});
		// 	uni.uploadFile({
		// 		url: 'http://120.55.58.244:9097/system/oss/upload',
		// 		filePath: blob,
		// 		name: 'file',
		// 		header: {
		// 			Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
		// 		},
		// 		success: res => {
		// 			uni.hideLoading();
		// 			this.userInfo.headUrl = JSON.parse(res.data).data.url;
		// 			uni.showToast({
		// 				title: '更新用户头像成功',
		// 				duration: 1000
		// 			});
		// 		},
		// 		fail: err => {
		// 			uni.hideLoading();
		// 			uni.showToast({
		// 				title: '用户头像上传失败',
		// 				icon: 'none',
		// 				duration: 2000
		// 			});
		// 		}
		// 	});
		// }
	}
	};
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		// height: 100vh;
		background: #ffffff;
		opacity: 1;

		.head-left {
			height: 40rpx;
			font-size: 30rpx;
			font-weight: 400;
			line-height: 36rpx;
			color: #7A7C94;
		}

		.head {
			height: 162rpx;
			display: flex;
			justify-content: space-between;
			border-top: 1rpx solid #f2f2f2;
			align-items: center;
			padding: 0rpx 32rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.right-img {
				width: 28rpx;
				height: 28rpx;
				margin-left: 10rpx;
			}
		}

		.name {
			width: 720rpx;
			height: 104rpx;
			display: flex;
			justify-content: space-between;
			border-top: 1rpx solid #f2f2f2;
			align-items: center;
			margin: auto;
			padding: 0rpx 18rpx;

			.right-img {
				width: 28rpx;
				height: 28rpx;
				margin-left: 10rpx;
			}

			input {
				width: 400rpx;
			}
		}

		.btn {
			width: 686rpx;
			height: 88rpx;
			background: #000;
			color: #FEC92F;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			border-radius: 50rpx;
			position: absolute;
			bottom: 100rpx;
			left: 50%;
			transform: translate(-50%);
		}
	}
</style>